<template>
    <div class="recommend-page">
        <!-- 搜索栏 -->
        <div class="search-section">
            <div class="search-container">
                <h1>发现你的下一个旅行目的地</h1>
                <div class="search-bar">
                    <input type="text" placeholder="搜索目的地、景点或体验..." />
                    <button class="search-btn">
                        <i class="fas fa-search"></i> 搜索
                    </button>
                </div>
                <div class="search-tags">
                    <span v-for="tag in popularTags" :key="tag" @click="searchByTag(tag)">#{{ tag }}</span>
                </div>
            </div>
        </div>

        <!-- 推荐目的地 -->
        <div class="section">
            <div class="section-header">
                <h2>为你推荐</h2>
                <router-link to="/destinations" class="view-all">查看全部</router-link>
            </div>
            <div class="destinations-grid">
                <div v-for="destination in recommendedDestinations" :key="destination.id" class="destination-card">
                    <div class="destination-image" :style="{ backgroundImage: `url(${destination.image})` }">
                        <div class="destination-badge" v-if="destination.badge">{{ destination.badge }}</div>
                    </div>
                    <div class="destination-info">
                        <h3>{{ destination.name }}</h3>
                        <div class="destination-location">
                            <i class="fas fa-map-marker-alt"></i> {{ destination.location }}
                        </div>
                        <div class="destination-stats">
                            <span><i class="far fa-heart"></i> {{ destination.likes }}</span>
                            <span><i class="far fa-comment"></i> {{ destination.reviews }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 热门游记 -->
        <div class="section">
            <div class="section-header">
                <h2>热门游记</h2>
                <router-link to="/trips" class="view-all">查看全部</router-link>
            </div>
            <div class="trips-carousel">
                <div v-for="trip in popularTrips" :key="trip.id" class="trip-card">
                    <div class="trip-image" :style="{ backgroundImage: `url(${trip.image})` }"></div>
                    <div class="trip-content">
                        <div class="trip-user">
                            <img :src="trip.user.avatar" :alt="trip.user.name" />
                            <span>{{ trip.user.name }}</span>
                        </div>
                        <h3>{{ trip.title }}</h3>
                        <p class="trip-excerpt">{{ trip.excerpt }}</p>
                        <div class="trip-meta">
                            <span><i class="far fa-calendar-alt"></i> {{ trip.date }}</span>
                            <span><i class="far fa-clock"></i> {{ trip.duration }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 特价优惠 -->
        <div class="section">
            <div class="section-header">
                <h2>限时特惠</h2>
                <router-link to="/deals" class="view-all">查看全部</router-link>
            </div>
            <div class="deals-grid">
                <div v-for="deal in specialDeals" :key="deal.id" class="deal-card">
                    <div class="deal-image" :style="{ backgroundImage: `url(${deal.image})` }">
                        <div class="deal-discount">-{{ deal.discount }}%</div>
                    </div>
                    <div class="deal-info">
                        <h3>{{ deal.title }}</h3>
                        <div class="deal-price">
                            <span class="original-price">¥{{ deal.originalPrice }}</span>
                            <span class="current-price">¥{{ deal.currentPrice }}</span>
                        </div>
                        <div class="deal-location">
                            <i class="fas fa-map-marker-alt"></i> {{ deal.location }}
                        </div>
                        <div class="deal-date">
                            <i class="far fa-calendar-alt"></i> {{ deal.dateRange }}
                        </div>
                        <button class="deal-btn">立即预订</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 旅行灵感 -->
        <div class="section">
            <div class="section-header">
                <h2>旅行灵感</h2>
                <router-link to="/inspirations" class="view-all">查看全部</router-link>
            </div>
            <div class="inspirations-tabs">
                <button v-for="tab in inspirationTabs" :key="tab.id"
                    :class="{ active: activeInspirationTab === tab.id }" @click="activeInspirationTab = tab.id">
                    {{ tab.label }}
                </button>
            </div>
            <div class="inspirations-content">
                <div v-if="activeInspirationTab === 'season'" class="inspiration-grid">
                    <div v-for="item in seasonalInspirations" :key="item.id" class="inspiration-card">
                        <div class="inspiration-image" :style="{ backgroundImage: `url(${item.image})` }"></div>
                        <h3>{{ item.title }}</h3>
                        <p>{{ item.description }}</p>
                    </div>
                </div>
                <div v-if="activeInspirationTab === 'theme'" class="inspiration-grid">
                    <div v-for="item in thematicInspirations" :key="item.id" class="inspiration-card">
                        <div class="inspiration-image" :style="{ backgroundImage: `url(${item.image})` }"></div>
                        <h3>{{ item.title }}</h3>
                        <p>{{ item.description }}</p>
                    </div>
                </div>
                <div v-if="activeInspirationTab === 'budget'" class="inspiration-grid">
                    <div v-for="item in budgetInspirations" :key="item.id" class="inspiration-card">
                        <div class="inspiration-image" :style="{ backgroundImage: `url(${item.image})` }"></div>
                        <h3>{{ item.title }}</h3>
                        <p>{{ item.description }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 旅行小贴士 -->
        <div class="section tips-section">
            <div class="section-header">
                <h2>旅行小贴士</h2>
            </div>
            <div class="tips-grid">
                <div v-for="tip in travelTips" :key="tip.id" class="tip-card">
                    <div class="tip-icon">
                        <i :class="tip.icon"></i>
                    </div>
                    <h3>{{ tip.title }}</h3>
                    <p>{{ tip.content }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { ref } from 'vue';

    export default {
        name: 'RecommendPage',
        setup() {
            // 热门搜索标签
            const popularTags = ref([
                '海岛度假', '美食之旅', '自驾游', '亲子游', '蜜月旅行',
                '背包客', '摄影之旅', '滑雪', '温泉', '世界遗产'
            ]);

            // 搜索标签
            const searchByTag = (tag) => {
                console.log('搜索标签:', tag);
                // 这里可以添加搜索逻辑
            };

            // 推荐目的地
            const recommendedDestinations = ref([
                {
                    id: 1,
                    name: '巴厘岛',
                    image: 'https://images.unsplash.com/photo-1537996194471-e657df975ab4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    location: '印度尼西亚',
                    likes: 2456,
                    reviews: 789,
                    badge: '热门'
                },
                {
                    id: 2,
                    name: '京都',
                    image: 'https://images.unsplash.com/photo-1492571350019-22de08371fd3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    location: '日本',
                    likes: 1987,
                    reviews: 543,
                    badge: '樱花季'
                },
                {
                    id: 3,
                    name: '冰岛',
                    image: 'https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    location: '欧洲',
                    likes: 3245,
                    reviews: 876,
                    badge: '极光'
                },
                {
                    id: 4,
                    name: '大理',
                    image: 'https://images.unsplash.com/photo-1547981609-4ab6cc31d8f7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    location: '中国云南',
                    likes: 1567,
                    reviews: 432,
                    badge: '慢生活'
                }
            ]);

            // 热门游记
            const popularTrips = ref([
                {
                    id: 1,
                    title: '日本关西七日游：京都、大阪、奈良',
                    image: 'https://images.unsplash.com/photo-1545566238-6a541cfafc43?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    excerpt: '春天的关西地区真是太美了，樱花盛开，古都京都的寺庙和神社在粉色的花海中显得格外宁静。',
                    date: '2023-04-15',
                    duration: '7天6晚',
                    user: {
                        name: '旅行达人',
                        avatar: 'https://randomuser.me/api/portraits/women/44.jpg'
                    }
                },
                {
                    id: 2,
                    title: '泰国清迈周末游：大象保护营体验',
                    image: 'https://images.unsplash.com/photo-1528181304800-259b08848526?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    excerpt: '参加了大象保护营的志愿者活动，与大象亲密接触，学习如何照顾这些温柔的巨人。',
                    date: '2022-12-05',
                    duration: '3天2晚',
                    user: {
                        name: '动物爱好者',
                        avatar: 'https://randomuser.me/api/portraits/men/32.jpg'
                    }
                },
                {
                    id: 3,
                    title: '云南大理丽江自由行攻略',
                    image: 'https://images.unsplash.com/photo-1547981609-4ab6cc31d8f7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    excerpt: '大理的洱海和丽江的古城，感受慢生活的美好，推荐几家超棒的民宿和餐厅。',
                    date: '2023-02-10',
                    duration: '5天4晚',
                    user: {
                        name: '背包客小张',
                        avatar: 'https://randomuser.me/api/portraits/men/22.jpg'
                    }
                },
                {
                    id: 4,
                    title: '巴黎浪漫之旅：埃菲尔铁塔下的求婚',
                    image: 'https://images.unsplash.com/photo-1431274172761-fca41d930114?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    excerpt: '在巴黎铁塔下求婚成功！分享我们的浪漫行程和巴黎必去的隐秘景点。',
                    date: '2022-08-22',
                    duration: '6天5晚',
                    user: {
                        name: '幸福情侣',
                        avatar: 'https://randomuser.me/api/portraits/women/65.jpg'
                    }
                }
            ]);

            // 特价优惠
            const specialDeals = ref([
                {
                    id: 1,
                    title: '巴厘岛豪华别墅5天4晚套餐',
                    image: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    discount: 30,
                    originalPrice: 5999,
                    currentPrice: 4199,
                    location: '印度尼西亚巴厘岛',
                    dateRange: '2023-09-01 至 2023-12-15'
                },
                {
                    id: 2,
                    title: '东京迪士尼乐园3天2晚自由行',
                    image: 'https://images.unsplash.com/photo-1550583720-4fb31ffc0d23?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    discount: 25,
                    originalPrice: 4599,
                    currentPrice: 3449,
                    location: '日本东京',
                    dateRange: '2023-10-01 至 2023-11-30'
                },
                {
                    id: 3,
                    title: '三亚亚龙湾五星酒店4天3晚套餐',
                    image: 'https://images.unsplash.com/photo-1571896349842-33c89424de2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    discount: 40,
                    originalPrice: 3999,
                    currentPrice: 2399,
                    location: '中国海南三亚',
                    dateRange: '2023-09-10 至 2023-10-20'
                },
                {
                    id: 4,
                    title: '欧洲四国10日经典游',
                    image: 'https://images.unsplash.com/photo-1464037866556-6812c9d1c72e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    discount: 15,
                    originalPrice: 12999,
                    currentPrice: 11049,
                    location: '法国/意大利/瑞士/德国',
                    dateRange: '2023-11-01 至 2024-02-28'
                }
            ]);

            // 旅行灵感标签
            const inspirationTabs = ref([
                { id: 'season', label: '季节推荐' },
                { id: 'theme', label: '主题旅行' },
                { id: 'budget', label: '预算选择' }
            ]);
            const activeInspirationTab = ref('season');

            // 季节推荐
            const seasonalInspirations = ref([
                {
                    id: 1,
                    title: '秋季赏枫之旅',
                    image: 'https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    description: '日本、加拿大等地的绝美枫叶景观'
                },
                {
                    id: 2,
                    title: '冬季滑雪胜地',
                    image: 'https://images.unsplash.com/photo-1517299321609-52687d1bc55a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    description: '瑞士、北海道等世界顶级滑雪场'
                },
                {
                    id: 3,
                    title: '春季赏花路线',
                    image: 'https://images.unsplash.com/photo-1523438885200-e635ba2c371e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    description: '荷兰郁金香、中国婺源油菜花海'
                },
                {
                    id: 4,
                    title: '夏季海岛度假',
                    image: 'https://images.unsplash.com/photo-1505228395891-9a51e7e86bf6?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    description: '马尔代夫、大溪地等梦幻海岛'
                }
            ]);

            // 主题旅行
            const thematicInspirations = ref([
                {
                    id: 1,
                    title: '美食之旅',
                    image: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    description: '东京、曼谷、巴黎等美食之都'
                },
                {
                    id: 2,
                    title: '摄影之旅',
                    image: 'https://images.unsplash.com/photo-1470115636492-6d2b56f9146d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    description: '冰岛、挪威等摄影天堂'
                },
                {
                    id: 3,
                    title: '文化遗产',
                    image: 'https://images.unsplash.com/photo-1527631746610-bca00a040d60?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    description: '埃及、希腊等文明古国'
                },
                {
                    id: 4,
                    title: '冒险体验',
                    image: 'https://images.unsplash.com/photo-1530521954074-e64f6810b32d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    description: '新西兰、尼泊尔等冒险胜地'
                }
            ]);

            // 预算选择
            const budgetInspirations = ref([
                {
                    id: 1,
                    title: '奢华之旅',
                    image: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    description: '迪拜、摩纳哥等奢华目的地'
                },
                {
                    id: 2,
                    title: '中档预算',
                    image: 'https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    description: '泰国、马来西亚等性价比之选'
                },
                {
                    id: 3,
                    title: '经济旅行',
                    image: 'https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    description: '越南、柬埔寨等背包客天堂'
                },
                {
                    id: 4,
                    title: '本地探索',
                    image: 'https://images.unsplash.com/photo-1503917988258-f87a78e3c995?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    description: '国内周边短途旅行推荐'
                }
            ]);

            // 旅行小贴士
            const travelTips = ref([
                {
                    id: 1,
                    icon: 'fas fa-passport',
                    title: '签证准备',
                    content: '提前了解目的地签证要求，留出充足时间办理'
                },
                {
                    id: 2,
                    icon: 'fas fa-suitcase-rolling',
                    title: '行李打包',
                    content: '根据目的地气候和行程安排合理打包行李'
                },
                {
                    id: 3,
                    icon: 'fas fa-money-bill-wave',
                    title: '货币兑换',
                    content: '提前兑换部分当地货币，了解支付方式'
                },
                {
                    id: 4,
                    icon: 'fas fa-wifi',
                    title: '通讯上网',
                    content: '购买当地SIM卡或租用移动WiFi设备'
                },
                {
                    id: 5,
                    icon: 'fas fa-utensils',
                    title: '饮食安全',
                    content: '注意饮食卫生，尝试当地特色要适量'
                },
                {
                    id: 6,
                    icon: 'fas fa-first-aid',
                    title: '健康防护',
                    content: '准备常用药品，了解当地医疗资源'
                }
            ]);

            return {
                popularTags,
                searchByTag,
                recommendedDestinations,
                popularTrips,
                specialDeals,
                inspirationTabs,
                activeInspirationTab,
                seasonalInspirations,
                thematicInspirations,
                budgetInspirations,
                travelTips
            };
        }
    };
</script>

<style scoped>
    /* 基础样式 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f5f5f5;
        color: #333;
    }

    .recommend-page {
        max-width: 1200px;
        margin: 0 auto;
        background-color: #fff;
    }

    /* 搜索区域 */
    .search-section {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
            url('https://images.unsplash.com/photo-1499678329028-101435549a4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
        background-size: cover;
        background-position: center;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-align: center;
        padding: 0 20px;
    }

    .search-container {
        max-width: 800px;
        width: 100%;
    }

    .search-container h1 {
        font-size: 36px;
        margin-bottom: 30px;
    }

    .search-bar {
        display: flex;
        margin-bottom: 20px;
    }

    .search-bar input {
        flex: 1;
        padding: 15px;
        border: none;
        border-radius: 30px 0 0 30px;
        font-size: 16px;
        outline: none;
    }

    .search-btn {
        padding: 0 30px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 0 30px 30px 0;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .search-btn:hover {
        background-color: #3d8b40;
    }

    .search-tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .search-tags span {
        background-color: rgba(255, 255, 255, 0.2);
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .search-tags span:hover {
        background-color: rgba(255, 255, 255, 0.3);
    }

    /* 通用区域样式 */
    .section {
        padding: 40px;
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }

    .section-header h2 {
        font-size: 24px;
        color: #333;
    }

    .view-all {
        color: #4CAF50;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s;
    }

    .view-all:hover {
        color: #3d8b40;
    }

    /* 目的地网格 */
    .destinations-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }

    .destination-card {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .destination-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .destination-image {
        height: 180px;
        background-size: cover;
        background-position: center;
        position: relative;
    }

    .destination-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #ff5722;
        color: white;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 12px;
    }

    .destination-info {
        padding: 15px;
    }

    .destination-info h3 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .destination-location {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
    }

    .destination-location i {
        color: #4CAF50;
        margin-right: 5px;
    }

    .destination-stats {
        display: flex;
        gap: 15px;
        font-size: 14px;
        color: #777;
    }

    .destination-stats i {
        margin-right: 5px;
    }

    /* 游记轮播 */
    .trips-carousel {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
        overflow-x: auto;
        padding-bottom: 20px;
    }

    .trip-card {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .trip-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .trip-image {
        height: 180px;
        background-size: cover;
        background-position: center;
    }

    .trip-content {
        padding: 15px;
    }

    .trip-user {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .trip-user img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .trip-user span {
        font-size: 14px;
        color: #666;
    }

    .trip-content h3 {
        font-size: 18px;
        margin-bottom: 10px;
        line-height: 1.3;
    }

    .trip-excerpt {
        font-size: 14px;
        color: #666;
        margin-bottom: 15px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .trip-meta {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        color: #999;
    }

    .trip-meta i {
        margin-right: 5px;
    }

    /* 特价优惠 */
    .deals-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }

    .deal-card {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .deal-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .deal-image {
        height: 150px;
        background-size: cover;
        background-position: center;
        position: relative;
    }

    .deal-discount {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #ff5722;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-weight: bold;
    }

    .deal-info {
        padding: 15px;
    }

    .deal-info h3 {
        font-size: 16px;
        margin-bottom: 10px;
        line-height: 1.3;
    }

    .deal-price {
        margin-bottom: 10px;
    }

    .original-price {
        font-size: 14px;
        color: #999;
        text-decoration: line-through;
        margin-right: 10px;
    }

    .current-price {
        font-size: 18px;
        color: #ff5722;
        font-weight: bold;
    }

    .deal-location,
    .deal-date {
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
    }

    .deal-location i,
    .deal-date i {
        color: #4CAF50;
        margin-right: 5px;
    }

    .deal-btn {
        width: 100%;
        padding: 8px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        font-weight: bold;
        margin-top: 10px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .deal-btn:hover {
        background-color: #3d8b40;
    }

    /* 旅行灵感标签 */
    .inspirations-tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }

    .inspirations-tabs button {
        padding: 8px 16px;
        background-color: #f5f5f5;
        border: none;
        border-radius: 20px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .inspirations-tabs button.active {
        background-color: #4CAF50;
        color: white;
    }

    /* 灵感网格 */
    .inspiration-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }

    .inspiration-card {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .inspiration-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .inspiration-image {
        height: 150px;
        background-size: cover;
        background-position: center;
    }

    .inspiration-card h3 {
        font-size: 16px;
        padding: 15px 15px 0;
        margin-bottom: 10px;
    }

    .inspiration-card p {
        font-size: 14px;
        color: #666;
        padding: 0 15px 15px;
        line-height: 1.5;
    }

    /* 旅行小贴士 */
    .tips-section {
        background-color: #f9f9f9;
    }

    .tips-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }

    .tip-card {
        background-color: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .tip-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .tip-icon {
        width: 50px;
        height: 50px;
        background-color: #f0f9f0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        color: #4CAF50;
        font-size: 20px;
    }

    .tip-card h3 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .tip-card p {
        font-size: 14px;
        color: #666;
        line-height: 1.5;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .search-section {
            height: 300px;
        }

        .search-container h1 {
            font-size: 28px;
        }

        .section {
            padding: 30px 20px;
        }

        .destinations-grid,
        .deals-grid,
        .inspiration-grid {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        }

        .tips-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 480px) {
        .search-bar {
            flex-direction: column;
        }

        .search-bar input {
            border-radius: 30px;
            margin-bottom: 10px;
        }

        .search-btn {
            border-radius: 30px;
            padding: 15px;
        }

        .section-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .destinations-grid,
        .deals-grid,
        .inspiration-grid {
            grid-template-columns: 1fr;
        }
    }
</style>